$(document).ready(function(){
// Cell object description
class CellDescriptor {
  constructor(width, height, borderTop, borderRight, borderBottom, borderLeft) {
    this.width = width;
    this.height = height;
    this.borderTop = borderTop;
    this.borderRight = borderRight;
    this.borderBottom = borderBottom;
    this.borderLeft = borderLeft;
  }
  // Method to generate cell style based on the descriptor
  generateStyle() {
    return `
      width: {this.width}px;
      height: {this.height}px;
      border-top: {this.borderTop.size}px {this.borderTop.show ? "solid" : "none"} {this.borderTop.color};
      border-right: {this.borderRight.size}px {this.borderRight.show ? "solid" : "none"} {this.borderRight.color};
      border-bottom: {this.borderBottom.size}px {this.borderBottom.show ? "solid" : "none"} {this.borderBottom.color};
      border-left: {this.borderLeft.size}px {this.borderLeft.show ? "solid" : "none"} {this.borderLeft.color};
    `;
  }
}

// Example of a JSON representation of the table
const tableDescriptor = {
  rows: 5,
  columns: 5,
  cells: [
    // ... You would have a CellDescriptor for each cell, for brevity only one is shown
    new CellDescriptor(
      100, 50, 
      { color: 'black', size: 1, show: true },
      { color: 'black', size: 1, show: true },
      { color: 'black', size: 1, show: true },
      { color: 'black', size: 1, show: true }
    ),
    // ... Other cells
  ]
};

function buildTable(descriptor) {
  const table = document.createElement('table');
  table.className = 'resizable-table';
  for (let i = 0; i < descriptor.rows; i++) {
    const row = table.insertRow();
    for (let j = 0; j < descriptor.columns; j++) {
      const cell = row.insertCell();
      const cellStyle = descriptor.cells[0].generateStyle(); // Assuming all cells have the same style for this example
      cell.setAttribute('style', cellStyle);
      cell.textContent = `{i},{j}`;
      
      if (j === descriptor.columns - 1) { // Last column gets a resizer
        const resizer = document.createElement('div');
        resizer.className = 'resizer';
        cell.appendChild(resizer);
        addResizerEvent(resizer);
      }
    }
  }
  document.getElementById('table-container').appendChild(table);
}

function addResizerEvent(resizer) {
  resizer.addEventListener('mousedown', function(e) {
    document.addEventListener('mousemove', resize, false);
    document.addEventListener('mouseup', stopResize, false);
    
    let prevX = e.clientX;
    let cells = resizer.parentElement.parentElement.children;

    function resize(e) {
      let newX = e.clientX;
      let diffX = newX - prevX;

      for (let cell of cells) {
        let cellWidth = cell.offsetWidth + diffX;
        cell.style.width = `${cellWidth}px`;
      }

      prevX = newX;
    }

    function stopResize() {
      document.removeEventListener('mousemove', resize, false);
      document.removeEventListener('mouseup', stopResize, false);
    }
  });
}

// Build the table from the descriptor
buildTable(tableDescriptor);
});